<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
    <script src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>点亮地图</title>
</head>
<body>
    <div id="main" style="min-width: 450px; height: 650px;"></div>
</body>
<script>   

    var myChart = echarts.init(document.getElementById('main'));
    myChart.showLoading();
    $.ajax({
        url : "weibo.json",
        type : "get",
        async : true,
        dataType : "json",
        success :function(weiboData){
        myChart.hideLoading();
        Data = function (index) {
            data = weiboData[index];
            var px = data[0] / 1000;
            var py = data[1] / 1000;
            var res = [[px, py]];

            for (var i = 2; i < data.length; i += 2) {
                var dx = data[i] / 1000;
                var dy = data[i + 1] / 1000;
                var x = px + dx;
                var y = py + dy;
                res.push([x, y]);
                px = x;
                py = y;

            }
            return res;
        };

        myChart.setOption({
            backgroundColor: '#404a59',
            title: {
                text: '微博点亮中国',
                subtext: 'From ThinkGIS',
                left: 'center',
                top: 'top',
                textStyle: {
                    color: '#fff'
                }
            },
            legend: {
                left: 'left',
                data: ['强', '中', '弱'],
                textStyle: {
                    color: '#ccc'
                }
            },
            geo: {
                name: '强',
                type: 'scatter',
                map: 'china',
                label: {
                    emphasis: {    
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                    },

                    emphasis: {
                        areaColor: '#2a333d'
                    }
                }
            },
    
            series: [{
                name: '弱',
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 1,
                large: true,
                itemStyle: {
                    normal: {
                        shadowBlur: 2,
                        shadowColor: 'rgba(37, 140, 249, 0.8)',
                        color: 'rgba(37, 140, 249, 0.8)'
                    }
                },

                data: Data(0)

            }, {
                name: '中',
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 1,
                large: true,
                itemStyle: {
                    normal: {
                        shadowBlur: 2,
                        shadowColor: 'rgba(14, 241, 242, 0.8)',
                        color: 'rgba(14, 241, 242, 0.8)'
                    }
                },
                data: Data(1)

            }, {
                name: '强',
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 1,
                large: true,
                itemStyle: {
                    normal: {
                        shadowBlur: 2,
                        shadowColor: 'rgba(255, 255, 255, 0.8)',
                        color: 'rgba(255, 255, 255, 0.8)'
                    }
                },
                data: Data(2)
            }]
        });
        }
    })
    </script>
</html>